<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>淘宝选女友</title>
  <style>
    * {
      margin: 0;
      padding: 0
    }

    ul,
    ol {
      list-style: none
    }

    h3 {
      height: 40px
    }

    button:disabled {
      cursor: not-allowed;
    }

    .shopping {
      width: 570px;
      margin: 100px auto;
      padding: 20px;
      border: 1px solid #ccc;
      position: relative;
      overflow: hidden;
    }

    .shopping .left {
      float: left;
    }

    .shopping .right {
      float: right;
    }

    .shopping img {
      user-select: none;
    }

    .shopping .girlImg {
      position: relative;
      width: 200px;
      height: 200px;
      cursor: move
    }

    .shopping .girlImg img {
      width: 100%;
      height: 100%
    }

    .shopping .girlImg span {
      display: none;
      width: 100px;
      height: 100px;
      position: absolute;
      background: rgba(255, 255, 0, 0.3);
      left: 0;
      top: 0;
    }

    .imgList {
      width: 220px;
      margin-top: 20px;
    }

    .imgList li {
      float: left;
      margin-right: 8px;
      border: 2px solid transparent
    }

    .imgList .ac {
      border: 2px solid red
    }

    .imgList li img {
      width: 40px;
      display: block;
      cursor: pointer;
    }

    .price {
      height: 50px;
      font-size: 30px;
      color: red;
      font-weight: bold
    }

    .priceList {
      overflow: hidden;
      margin: 20px 0
    }

    .priceList li {
      float: left;
      height: 30px;
      line-height: 30px;
      padding: 0 10px;
      border: 2px solid #999;
      margin-right: 10px;
      cursor: pointer
    }

    .priceList .ac {
      border: 2px solid red
    }

    .changeNum {
      position: relative;
      margin: 20px 0
    }

    .changeNum input {
      width: 40px;
      height: 41px;
      text-align: center;
      line-height: 40px;
      border: 1px solid #ccc;
    }

    .changeNum button {
      height: 22px;
      width: 20px;
      background: none;
      border: 1px solid #ccc;
      position: absolute;
    }

    .changeNum .addBtn {
      left: 41px;
      top: 0px;
    }

    .changeNum .subBtn {
      left: 41px;
      top: 21px;
    }

    .okBtn {
      height: 30px;
      width: 100px
    }

    .bigBox {
      position: absolute;
      width: 200px;
      height: 200px;
      left: 230px;
      display: none;
      overflow: hidden;
    }

    .bigBox img {
      position: absolute;
    }

    .shopCart {
      position: fixed;
      right: 0;
      top: 200px;
      color: red;
    }

    .shopNum {
      width: 60px;
      height: 25px;
      background: deeppink;
      color: black;
      text-align: center;
      line-height: 25px;
    }

    .active {
      width: 25px;
      height: 25px;
      background: skyblue;
      position: absolute;
    }

    .show {
      width: 570px;
      height: 150px;
      padding: 20px;
      border: 1px solid black;
      display: none;
      position: absolute;
      user-select: none;
      background: white;
    }

    .show .close {
      width: 20px;
      height: 20px;
      background-color: #999;
      text-align: center;
      line-height: 20px;
      position: absolute;
      right: 0px;
      top: 0px;
      cursor: pointer;
    }

    .show .close:hover {
      color: white;
    }

    .show .bar {
      width: 610px;
      height: 20px;
      background-color: #999;
      position: absolute;
      left: 0px;
      top: 0px;
    }
  </style>
</head>

<body>
  <div class="shopping" id="shopping">
    <div class="left">
      <div class="girlImg" id="box">
        <img id="girl" src="0.jpg">
        <span></span>
      </div>
      <ol id="imgList" class="imgList">
        <li><img src="0.jpg"></li>
        <li><img src="1.jpg"></li>
        <li><img src="2.jpg"></li>
        <li><img src="3.jpg"></li>
      </ol>
    </div>
    <div class="right">
      <h3>淘宝选女友---不要998,女友带回家!!</h3>
      <div id="price" class="price"><em>480-99988</em> 元</div>
      <ul id="priceList" class="priceList">
        <li value="480">标准版</li>
        <li value="910">升级版</li>
        <li value="5220">豪华版</li>
        <li value="99998">定制版</li>
      </ul>
      <div id="changeNum" class="changeNum">
        <input type="text" value="1">
        <button class="addBtn" type="button">+</button>
        <button class="subBtn" type="button" disabled>-</button>
      </div>
      <button id="okBtn" class="okBtn" type="button" disabled>加入购物车</button>
    </div>
    <div id="bigBox" class="bigBox"><img src="0.jpg" alt=""></div>
  </div>
  <div id="shopCart" class="shopCart">
    购物车
    <p id="shopNum" class="shopNum">0</p>
    <button>结算</button>
  </div>
  <div id="show" class="show">
    <h3> </h3>
    <div class="bar">
      <div class="close">x</div>
    </div>
  </div>



  <script>
    class Shopping {
      constructor(id) {
        this.box = document.querySelector(id)
        this.small = this.box.querySelector("#girl")
        this.smallBox = this.box.querySelector("#box")
        this.imgList = this.box.querySelectorAll("#imgList img")
        this.title = this.box.querySelector("h3")
        this.price = this.box.querySelector("#price")
        this.priceList = this.box.querySelectorAll("#priceList li")
        this.changeNum = this.box.querySelector("#changeNum")
        this.addBtn = this.changeNum.querySelector(".addBtn")
        this.subBtn = this.changeNum.querySelector(".subBtn")
        this.num = this.changeNum.querySelector("input[type='text']")
        this.cart = document.querySelector("#shopCart")
        this.cart.shopNum = this.cart.querySelector("#shopNum")
        this.cart.jiesuan = this.cart.querySelector("button")
        this.big = this.box.querySelector("#bigBox")
        this.bigImg = this.big.querySelector("img")
        this.okBtn = this.box.querySelector("#okBtn")
        this.selected = 0
        this.count = 0
        this.mask = this.box.querySelector("span")
        this.mWidth = parseInt(getComputedStyle(this.mask).width)
        this.sWidth = parseInt(getComputedStyle(this.small).width)
        this.bWidth = parseInt(getComputedStyle(this.big).width)
        this.show = document.querySelector("#show")
        this.money = this.show.querySelector("h3")
        this.show.bar = this.show.querySelector(".bar")
        this.show.close = this.show.querySelector(".close")
        this.X = this.sWidth / this.mWidth
        this.initial()
      }
      initial() {
        this.num.value = 0
        this.imgList[this.selected].className = "ac"
        this.priceList[this.selected].className = "ac"
        if (this.num.value > 0) {
          this.subBtn.removeAttribute("disabled")
          this.okBtn.removeAttribute("disabled")
        }
        this.rePosition()//根据购物车位置改变信息显示位置
        this.bindEvents()
      }
      bindEvents() {
        for (let i = 0; i < this.imgList.length; i++) {
          this.imgList[i].onclick = () => this.change(i)
          this.priceList[i].onclick = () => this.change(i)
          this.imgList[i].num = 0
          this.priceList[i].num = 0
        }
        this.addBtn.onclick = () => {
          this.num.value++
          this.test()
        }
        this.subBtn.onclick = () => {
          this.num.value--
          this.test()
        }
        this.okBtn.onclick = e => {
          clearInterval(this.flyTimer)
          if (this.num.value > 0) {
            this.imgList[this.selected].num += parseInt(this.num.value)
            this.priceList[this.selected].num += parseInt(this.num.value)//用于计算总价格的数组
            var x1 = this.box.offsetLeft + this.imgList[this.selected].offsetLeft
            var x2 = this.cart.offsetLeft
            var x3 = x2 - 100
            var y1 = this.box.offsetTop + this.imgList[this.selected].offsetTop
            var y2 = this.cart.offsetTop
            var y3 = 100
            this.a = -((y2 - y3) * x1 - (x2 - x3) * y1 + x2 * y3 - x3 * y2) / ((x2 - x3) * (x1 - x2) * (x1 - x3));
            this.b = ((y2 - y3) * x1 * x1 + x2 * x2 * y3 - x3 * x3 * y2 - (x2 * x2 - x3 * x3) * y1) / ((x2 - x3) * (x1 - x2) * (x1 - x3));
            this.c = ((x2 * y3 - x3 * y2) * x1 * x1 - (x2 * x2 * y3 - x3 * x3 * y2) * x1 + (x2 * x2 * x3 - x2 * x3 * x3) * y1) / ((x2 - x3) * (x1 - x2) * (x1 - x3));
            this.flyTimer = setInterval(() => this.fly(x1, x2), 200)
          }
        }
        this.smallBox.onmouseenter = () => {
          this.big.style.display = "block"
          this.mask.style.display = "block"
        }
        this.smallBox.onmousemove = e => {
          this.fangda(e)
        }
        this.smallBox.onmouseleave = () => {
          this.big.style.display = "none"
          this.mask.style.display = "none"
        }
        this.cart.jiesuan.onclick = () => {
          var all = 0
          this.show.style.display = "block"
          for (var i = 0; i < this.priceList.length; i++) {
            all += this.priceList[i].value * this.imgList[i].num
          }
          this.money.innerHTML = `总消费:${all}元<br>
          标准版:${this.priceList[0].num}个,花费 ${this.priceList[0].num * this.priceList[0].value}元<br>
          升级版:${this.priceList[1].num}个,花费 ${this.priceList[1].num * this.priceList[1].value}元<br>
          豪华版:${this.priceList[2].num}个,花费 ${this.priceList[2].num * this.priceList[2].value}元<br>
          定制版:${this.priceList[3].num}个,花费 ${this.priceList[3].num * this.priceList[3].value}元`
        }
        this.show.close.onclick = () => {
          this.show.style.display = "none"
        }
        this.show.bar.onmousedown = e => {
          var x = e.offsetX
          var y = e.offsetY
          document.onmousemove = e => {
            this.show.style.left = e.clientX - x + "px"
            this.show.style.top = e.clientY - y + "px"
          }
          document.onmouseup = () => {
            document.onmousemove = null
            document.onmouseup = null
          }
        }
      }
      fly(x1, x2) {
        this.count++
        if (this.count == this.num.value) {
          clearInterval(this.flyTimer)
          this.count = 0
        }
        var girl = this.imgList[this.selected].cloneNode()
        girl.style.position = "absolute"
        girl.style.width = "40px"
        document.body.appendChild(girl)
        girl.style.left = x1 + 3 + "px"
        var y1 = this.a * x1 * x1 + this.b * x1 + this.c
        girl.style.top = y1 + 3 + "px"
        var timer = setInterval(() => {
          girl.style.left = x1 + "px"
          var y1 = this.a * x1 * x1 + this.b * x1 + this.c
          girl.style.top = y1 + "px"
          x1 += 10
          if (x1 >= x2) {
            clearInterval(timer)
            document.body.removeChild(girl)
          }

        }, 20)
        setTimeout(() => this.cart.shopNum.innerText = parseInt(this.cart.shopNum.innerText) + 1, 1500)
      }
      test() {
        if (this.num.value > 0) {
          this.subBtn.removeAttribute("disabled")
          this.okBtn.removeAttribute("disabled")
        }
        if (this.num.value == 0) {
          this.subBtn.disabled = "disabled"
          this.okBtn.disabled = "disabled"
        }
      }
      change(i) {
        this.selected = i
        for (var j = 0; j < this.priceList.length; j++) {
          this.priceList[j].className = ""
          this.imgList[j].className = ""
        }
        this.priceList[i].className = "ac"
        this.imgList[i].className = "ac"
        this.small.src = this.imgList[i].src
        this.bigImg.src = this.imgList[i].src
        this.price.innerText = this.priceList[i].value + "元"
      }
      fangda(e) {
        var x = e.clientX - this.smallBox.offsetLeft - this.box.offsetLeft - this.mWidth / 2
        var y = e.clientY - this.smallBox.offsetTop - this.box.offsetTop - this.mWidth / 2
        if (x < 0)
          x = 0
        if (y < 0)
          y = 0
        if (x > this.sWidth - this.mWidth)
          x = this.sWidth - this.mWidth
        if (y > this.sWidth - this.mWidth)
          y = this.sWidth - this.mWidth
        this.mask.style.left = x + "px"
        this.mask.style.top = y + "px"
        this.bigImg.style.left = -x * this.X + "px"
        this.bigImg.style.top = -y * this.X + "px"

      }
      rePosition() {
        this.show.style.left = this.box.offsetLeft + "px"

      }
    }

    var shop1 = new Shopping("#shopping")
  </script>
</body>

</html>